<template>
	<div class="app-container">
		<!-- 认证查询和其他操作 -->
		<div class="filter-container">
			<el-select v-model="listQuery.userType" style="width: 200px" class="filter-item" placeholder="请选择用户类型">
				<el-option v-for="(key, value) in userType" :key="key" :label="key" :value="value"/>
			</el-select>
			<el-select v-model="listQuery.status" style="width: 200px" class="filter-item" placeholder="请选择认证状态">
				<el-option v-for="(key, value) in statusType" :key="key" :label="key" :value="value"/>
			</el-select>
			<el-button v-permission="[1]" clearable class="filter-item" type="primary" icon="el-icon-search"
			           @click="handleFilter">查找
			</el-button>
		</div>
		
		<!-- 查询结果 -->
		<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
		          highlight-current-row>
			
			<el-table-column type="expand" label="详细信息">
				<template slot-scope="props">
					<el-form label-position="left" inline class="el-table-expand">
						<el-form-item label="法人姓名">
							<span>{{ props.row.legalPerson }}</span>
						</el-form-item>
						<el-form-item label="经营范围">
							<span>{{ props.row.scope }}</span>
						</el-form-item>
						<el-form-item label="开票资料">
							<span>{{ props.row.invoiceInfo }}</span>
						</el-form-item>
						<el-form-item label="认证时间">
							<span>{{ props.row.createTime | formatTime }}</span>
						</el-form-item>
						<el-form-item label="营业执照">
							<el-image
									style="width: 100px; height: 100px; cursor: pointer"
									v-for="(item, index) in handleImgArray(props.row.licensePhoto)" :key="index"
									:fit="'cover'"
									:src="item"
									@click="showViewer(item)">
							</el-image>
						</el-form-item>
						<el-form-item label="资质证书">
							<el-image
									style="width: 100px; height: 100px; cursor: pointer"
									v-for="(item, index) in handleImgArray(props.row.certificationsPhoto)" :key="index"
									:fit="'cover'"
									:src="item"
									@click="showViewer(item)">
							</el-image>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>
			
			<el-table-column align="center" width="160" label="操作">
				<template slot-scope="scope" v-if="scope.row.status === 0">
					<el-button v-permission="[1]" type="primary" size="mini" @click="handlePass(scope.row)">通过
					</el-button>
					<el-button v-permission="[1]" type="danger" size="mini" @click="handleReject(scope.row)">驳回
					</el-button>
				</template>
			</el-table-column>
			
			<el-table-column align="center" width="80" label="认证编号" prop="id"/>
			
			<el-table-column align="center" width="120" label="认证类型" prop="userType">
				<template slot-scope="scope">
					<el-tag>{{ scope.row.userType | authTypeFilter }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" width="120" label="认证状态" prop="status">
				<template slot-scope="scope">
					<el-tag>{{ scope.row.status | authStatusFilter }}</el-tag>
				</template>
			</el-table-column>
			
			<el-table-column align="center" width="80" label="用户ID" prop="userId"/>
			<el-table-column align="center" label="用户姓名" prop="realName"/>
			<el-table-column align="center" label="联系方式" prop="companyPhone"/>
			<el-table-column align="center" label="公司名称" prop="sellerName"/>
		
		</el-table>
		
		<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
		            @pagination="getList"/>
		
		<!-- 驳回对话框 -->
		<el-dialog :visible.sync="rejectDialogVisible" title="驳回">
			<el-form ref="rejectForm" :model="rejectForm" :rules="rejectRules" status-icon label-position="left"
			         label-width="100px" style="width: 400px; margin-left:50px;">
				<el-form-item label="备注" prop="rejectReason">
					<el-input type="textarea" v-model="rejectForm.rejectReason"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="rejectDialogVisible = false">取消</el-button>
				<el-button :disabled="rejectSubmiting" type="primary" @click="confirmReject">确定</el-button>
			</div>
		</el-dialog>
		
		<el-dialog :visible.sync="showImg" title="图片详情">
			<div v-for="(item, index) in url" :key="index">
				<img :src="item" width="100%">
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {listAuth, passAuth} from '@/api/auth'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	
	const userType = {
		0: '采购商',
		1: '供应商'
	}
	
	const statusType = {
		0: '申请中',
		1: '已通过',
		2: '已驳回'
	}
	
	export default {
		name: 'Auth',
		components: {Pagination},
		filters: {
			authTypeFilter(status) {
				return userType[status]
			},
			authStatusFilter(status) {
				return statusType[status]
			}
		},
		data() {
			return {
				list: undefined,
				total: 0,
				listLoading: true,
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					status: undefined,
					userType: undefined
				},
				userType,
				statusType,
				rejectForm: {
					id: '',
					rejectReason: ''
				},
				rejectDialogVisible: false,
				rejectSubmiting: false,
				rejectRules: {
					rejectReason: [{required: true, message: '请填写驳回原因', trigger: 'blur'}]
				},
				url: [],
				showImg: false,
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				this.listLoading = true
				listAuth(this.listQuery)
					.then(res => {
						this.list = res.data.records
						this.total = res.data.total
						this.listLoading = false
					})
					.catch(() => {
						this.list = []
						this.total = 0
						this.listLoading = false
					})
			},
			handleImgArray(arr) {
				return arr.split(',')
			},
			handlePass(row) {
				let data = {
					id: row.id,
					status: 1
				}
				passAuth(data)
					.then(res => {
						this.$notify.success({
							title: '成功',
							message: '审核成功'
						})
						this.handleFilter()
					})
					.catch(res => {
					})
			},
			handleReject(row) {
				const obj = {
					id: row.id,
					status: 2
				}
				this.rejectForm = Object.assign(this.rejectForm, obj)
				console.log(this.rejectForm)
				this.rejectDialogVisible = true
			},
			confirmReject() {
				this.$refs['rejectForm'].validate((valid) => {
					console.log(valid)
					if (valid) {
						this.rejectSubmiting = true
						passAuth(this.rejectForm)
							.then(res => {
								this.rejectSubmiting = false
								this.rejectDialogVisible = false
								this.$notify.success({
									title: '成功',
									message: '驳回成功'
								})
								this.handleFilter()
							})
							.catch(res => {
								this.rejectSubmiting = false
							})
					}
				})
			},
			showViewer(row) {
				this.url = this.handleImgArray(row)
				this.showImg = true
			},
			closeViewer() {
				this.showImg = false
			},
			handleFilter() {
				this.listQuery.pageNum = 1
				this.getList()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.el-table-expand {
		font-size: 0;
	}
	
	.el-table-expand label {
		width: 90px;
		color: #99a9bf;
	}
	
	.el-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>

